<template>
  <div>
    <el-row class="row" :gutter="20">
      <el-col :span="16">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/teacher' }">教师菜单</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/teacher/comment' }">评阅管理</el-breadcrumb-item>
          <el-breadcrumb-item>评阅详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row class="card" :gutter="20">
      <el-col :span="12" v-if="choiceInfo">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>选题信息</span>
          </div>
          <div class="card-body">
            <div class="topic-card">
              <el-row class="card-row" :gutter="20">
                <el-col>学生姓名：{{choiceInfo.stuName}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>学生学号：{{choiceInfo.stuNo}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题编号：{{choiceInfo.topNo}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题名称：{{choiceInfo.topName}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>选题状态：
                  <span style="color: #2e99b0">{{choiceInfo.choStateDesc}}</span>
                </el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>选题时间：{{choiceInfo.gmtCreate}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>更新时间：{{choiceInfo.gmtModify}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题内容：</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>
                  <el-input type="textarea" :rows="12" v-model="choiceInfo.topContent" :disabled="true"></el-input>
                </el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>下载附件：
                  <el-button icon="el-icon-download" type="text" @click="download(choiceInfo.choAttach)">{{choiceInfo.choAttach}}</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header">
            <span>我的评阅</span>
            <span style="float: right;">
              <el-button type="danger" size="mini" icon="el-icon-edit" circle @click="dialogVisible = true"></el-button>
            </span>
          </div>
          <div class="card-body">
            <el-row class="card-row" :gutter="20">
              <el-col>
                <div style="color:#ff6767;font-size: 80px; text-align: center; margin-bottom: 5%;  margin-top: 10%">
                  {{commentInfo.comScore? commentInfo.comScore: '--'}}
                </div>
              </el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>评阅编号：{{commentInfo.comNo}}</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>评阅状态：
                <span style="color: #ff6767">{{commentInfo.comStateDesc}}</span>
              </el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>指定时间：{{commentInfo.gmtCreate}}</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>更新时间：{{commentInfo.gmtModify}}</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>评阅内容：</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>
                <el-input type="textarea" :rows="8" v-model="commentInfo.comContent" :disabled="true"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <teacher-comment-dialog :visible.sync="dialogVisible" :commentInfo="commentInfo" />
  </div>
</template>

<script>
import TeacherCommentDialog from './TeacherCommentDialog'

export default {
  name: 'TeacherCommentDetail',
  components: {
    TeacherCommentDialog
  },
  data () {
    return {
      dialogVisible: false,
      choiceInfo: {
        choNo: '',
        stuNo: '',
        stuName: '',
        topNo: '',
        topName: '',
        teaNo: '',
        choState: 0,
        choStateDesc: '',
        choAttach: '',
        gmtCreate: '',
        gmtModify: ''
      },
      commentInfo: {
        comNo: '',
        choNo: '',
        teaNo: '',
        teaName: '',
        comScore: '',
        comContent: '',
        comState: 1,
        comStateDesc: '',
        gmtCreate: '',
        gmtModify: ''
      }
    }
  },
  methods: {
    getCommentInfo () {
      this.$axios.get(`/api/comment/${this.$route.params.comNo}`)
        .then(response => {
          let result = response.data
          if (result.success) {
            this.commentInfo = result.data
            this.getChoiceInfo()
          } else {
            this.$message.error(result.msg)
          }
        })
    },
    getChoiceInfo () {
      this.$axios.get(`/api/choice/${this.commentInfo.choNo}`)
        .then(response => {
          let result = response.data
          if (result.success) {
            this.choiceInfo = result.data
          } else {
            this.$message.error(result.msg)
          }
        })
    },
    download (choAttach) {
      this.$axios({
        url: `/api/storage/file/${choAttach}`,
        method: 'get',
        responseType: 'blob'
      }).then(response => {
        // 创建隐藏的可下载链接
        var eleLink = document.createElement('a')
        eleLink.download = choAttach
        eleLink.style.display = 'none'
        // 字符内容转变成blob地址
        var blob = new Blob([response.data])
        eleLink.href = URL.createObjectURL(blob)
        // 触发点击
        document.body.appendChild(eleLink)
        eleLink.click()
        // 然后移除
        document.body.removeChild(eleLink)
      })
    }
  },
  mounted () {
    this.getCommentInfo()
  }
}
</script>

<style lang="stylus" scoped>
.row {
  margin: 20px;
}

.card-body {
  height: 550px;
}

.card-row {
  margin-bottom: 10px;
}
</style>
